@import '../../vendor/mdui/variable.less';

.mc-datatable {
  // 移除表格边框
  .mdui-table {
    overflow: visible;
    border: none !important;
    box-shadow: none;
  }

  // 滚动时添加表头阴影
  thead {
    transition: box-shadow .25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &.is-top thead {
    box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .1);

    .mdui-theme-layout-dark & {
      box-shadow: 0 3px 2px -2px rgba(255, 255, 255, .1);
    }
  }

  // 使表格 tbody 部分可以纵向滚动
  tbody {
    display: block;
    width: 100%;
    height: ~'calc(100vh - 112px)';
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }

  thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  // 加载中状态
  tbody.is-loading {
    height: ~'calc(100vh - 174px)';
  }

  // 空状态
  tbody.is-empty {
    height: ~'calc(100vh - 404px)';
  }

  // 单元格样式
  th, td {
    padding-left: 6px;
  }

  // 表格 checkbox 部分
  .mdui-table-cell-checkbox {
    width: 66px;
    padding-left: 24px;

    .avatar {
      float: left;
      width: 28px;
      height: 28px;
      margin-left: -5px;
      border-radius: 50%;
    }

    .mdui-checkbox {
      float: left;
      margin-top: 0;
    }

    &.with-avatar {
      .mdui-checkbox {
        display: none;
      }
    }
  }

  tbody tr:hover,
  .mdui-table-row-selected {
    .mdui-table-cell-checkbox {
      &.with-avatar {
        .avatar {
          display: none;
        }

        .mdui-checkbox {
          display: block;
        }
      }
    }
  }

  // checkbox 颜色修改
  tbody {
    .mdui-checkbox-icon::after {
      border-color: rgba(0, 0, 0, 0.16);

      .mdui-theme-layout-dark & {
        border-color: rgba(255, 255, 255, 0.3);
      }
    }

    tr:hover {
      .mdui-checkbox-icon::after {
        border-color: rgba(0, 0, 0, 0.54);

        .mdui-theme-layout-dark & {
          border-color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  // 表头含 colspan 时，不限制宽度
  th[colspan] {
    width: auto !important;
  }

  // 表头样式
  th {
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    color: #5f6368;
    font-weight: normal;
    font-size: 14px;
    line-height: 47px;
    border-bottom: none;
    box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.122);
    cursor: default;
  }

  // 有选择的行时，修改表头样式
  thead tr.checked {
    th {
      color: #1a73e8 !important;
      font-size: 16px;

      .mdui-theme-layout-dark & {
        color: #e8f0fe !important;
      }
    }

    .mdui-btn {
      width: 40px;
      height: 40px;
      margin-right: 12px;
      margin-left: -6px;
      color: @primaryColor !important;

      .mdui-theme-layout-dark & {
        color: @primaryColorDark !important;
      }
    }
  }

  // 行悬浮状态
  tbody tr {
    box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.122);
    cursor: pointer;
    transition: none;

    &:hover {
      background-color: rgba(0, 0, 0, 0.04);

      .mdui-theme-layout-dark & {
        background-color: rgba(255, 255, 255, 0.08);
      }
    }
  }

  // 行选中状态
  .mdui-table-row-selected {
    background-color: rgba(0, 0, 0, 0.06) !important;

    .mdui-theme-layout-dark & {
      background-color: rgba(255, 255, 255, 0.16) !important;
    }
  }

  // body 表格样式
  td {
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    line-height: 44px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: none !important;
  }

  // 表格内链接样式
  td a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.24);

    .mdui-theme-layout-dark & {
      border-bottom-color: rgba(255, 255, 255, 0.24);
    }

    &:hover {
      border-bottom: 1px dashed rgba(0, 0, 0, 0.87);

      .mdui-theme-layout-dark & {
        border-bottom-color: rgba(255, 255, 255, 0.87);
      }
    }
  }

  // 操作项
  .actions {
    text-align: right;

    .mdui-btn {
      width: 40px;
      height: 40px;
    }
  }

  thead {
    .actions {
      overflow: visible;

      .mdui-btn {
        display: inline-block;
        margin: 0;
      }

      .mdui-menu {
        width: 220px;
        text-align: left;
      }
    }
  }

  tbody {
    .actions {
      font-size: 12px;

      .placeholder {
        color: rgba(0, 0, 0, 0.64);

        .mdui-theme-layout-dark & {
          color: rgba(255, 255, 255, 0.64);
        }
      }

      .mdui-btn {
        display: none;
        margin-top: -2px;
        border-bottom: none;

        &:last-child {
          margin-right: -8px;
        }

        .mdui-icon {
          font-size: 20px;
        }
      }
    }
  }

  tbody tr:hover {
    .actions {
      .placeholder {
        display: none;
      }

      .mdui-btn {
        display: inline-block;
      }
    }
  }

  // 最后访问的一行高亮
  tbody tr {
    box-sizing: border-box;
    border-left: 2px solid transparent;

    &.last-visit {
      border-left-color: #1a73e8;

      .mdui-theme-layout-dark & {
        border-left-color: rgba(255, 255, 255, .7);
      }
    }

    .mdui-table-cell-checkbox {
      padding-left: 22px !important;
    }
  }
}
